<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D散点图</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/echarts4.x/echarts.js"></script>
    <script type="text/javascript" src="../../js/echarts4.x/ECharts GL1.x.js"></script>
</head>
<body>
<div id="3DMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    /**
     * @javascript
     * @author 黄朋 by 2018-06-12
     * */
    let mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。
    let mapChart = echarts.init(document.getElementById('3DMap'));// 初始化echarts对象为mapChart
    /*let bar3D = [
        {name:"上海",value:[121.48, 31.22,(Math.random() * 300).toFixed(2)]},
        {name:"广州",value:[113.23, 23.16,(Math.random() * 300).toFixed(2)]},
        {name:"招远",value:[120.38, 37.35,(Math.random() * 300).toFixed(2)]},
        {name:"盐城",value:[120.13, 33.38,(Math.random() * 300).toFixed(2)]},
        {name:"青岛",value:[120.33, 36.07,(Math.random() * 300).toFixed(2)]},
        {name:"泉州",value:[118.58, 24.93,(Math.random() * 300).toFixed(2)]},
        {name:"南通",value:[121.05, 32.08,(Math.random() * 300).toFixed(2)]},
        {name:"拉萨",value:[91.11, 29.97,(Math.random() * 300).toFixed(2)]},
        {name:"攀枝花",value:[101.718637, 26.582347,(Math.random() * 300).toFixed(2)]},
        {name:"烟台",value:[121.39, 37.52,(Math.random() * 300).toFixed(2)]},
        {name:"南宁",value:[108.33, 22.84,(Math.random() * 300).toFixed(2)]},
        {name:"芜湖",value:[118.38, 31.33,(Math.random() * 300).toFixed(2)]},
        {name:"库尔勒",value:[86.06, 41.68,(Math.random() * 300).toFixed(2)]},
        {name:"长沙",value:[113, 28.21,(Math.random() * 300).toFixed(2)]},
        {name:"合肥",value:[117.27, 31.86,(Math.random() * 300).toFixed(2)]},
        {name:"太原",value:[112.53, 37.87,(Math.random() * 300).toFixed(2)]},
        {name:"长春",value:[125.35, 43.88,(Math.random() * 300).toFixed(2)]},
        {name:"成都",value:[104.06, 30.67,(Math.random() * 300).toFixed(2)]},
        {name:"武汉",value:[114.31, 30.52,(Math.random() * 300).toFixed(2)]}
    ];
    let scatter3D = [
        {name:"贵阳",value:[106.71, 26.57,((Math.random() * 100) + 50).toFixed(2)]},
        {name:"西宁",value:[101.74, 36.56,((Math.random() * 100) + 50).toFixed(2)]},
        {name:"南昌",value:[115.89, 28.68,((Math.random() * 100) + 50).toFixed(2)]},
        {name:"郑州",value:[113.65, 34.76,((Math.random() * 100) + 50).toFixed(2)]},
        {name:"南京",value:[118.78, 32.04,((Math.random() * 100) + 50).toFixed(2)]},
        {name:"北京",value:[116.46, 39.92,((Math.random() * 100) + 50).toFixed(2)]}
        ];*/
    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../config/scatter_bar_3d.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            if(option != null)
            {
                mapOption = option;
                getMap();
            }
        });
    }
    /*
     * 读取geo地图数据并注入echarts api
     */
    function getMap()
    {
        // 数据加载项，增强用户体验
        //mapChart.showLoading();
        // 地图json文件的地址
        var mapUrl = "../../mapData/map/json/china.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("china", json); // 注册地图
            mapOption.geo3D.map = "china"; // 设置geo坐标系地图名称
            mapOption.legend.data = ["bar3D","scatter3D"];//图例data设置
            mapOption.legend.x = "right";//图例x轴位置 左、中、右英文
            mapOption.legend.y = "top";//图例y轴位置 上、中、下英文
            /*
             * 3d系列一业务数据和图标设置
             */
            mapOption.series[0].type = "bar3D";//自定义图标类型，此处可以设置bar3D、line3D、line3D
            mapOption.series[0].name = "bar3D";// 自定义图列名称。
            mapOption.tooltip.formatter = displayContent;// 设置内容展示
            mapOption.series[0].data = [
                {name:"上海",value:[121.48, 31.22,(Math.random() * 300).toFixed(2)]},
                {name:"广州",value:[113.23, 23.16,(Math.random() * 300).toFixed(2)]},
                {name:"招远",value:[120.38, 37.35,(Math.random() * 300).toFixed(2)]},
                {name:"盐城",value:[120.13, 33.38,(Math.random() * 300).toFixed(2)]},
                {name:"青岛",value:[120.33, 36.07,(Math.random() * 300).toFixed(2)]},
                {name:"泉州",value:[118.58, 24.93,(Math.random() * 300).toFixed(2)]},
                {name:"南通",value:[121.05, 32.08,(Math.random() * 300).toFixed(2)]},
                {name:"拉萨",value:[91.11, 29.97,(Math.random() * 300).toFixed(2)]},
                {name:"攀枝花",value:[101.718637, 26.582347,(Math.random() * 300).toFixed(2)]},
                {name:"烟台",value:[121.39, 37.52,(Math.random() * 300).toFixed(2)]},
                {name:"南宁",value:[108.33, 22.84,(Math.random() * 300).toFixed(2)]},
                {name:"芜湖",value:[118.38, 31.33,(Math.random() * 300).toFixed(2)]},
                {name:"库尔勒",value:[86.06, 41.68,(Math.random() * 300).toFixed(2)]},
                {name:"长沙",value:[113, 28.21,(Math.random() * 300).toFixed(2)]},
                {name:"合肥",value:[117.27, 31.86,(Math.random() * 300).toFixed(2)]},
                {name:"太原",value:[112.53, 37.87,(Math.random() * 300).toFixed(2)]},
                {name:"长春",value:[125.35, 43.88,(Math.random() * 300).toFixed(2)]},
                {name:"成都",value:[104.06, 30.67,(Math.random() * 300).toFixed(2)]},
                {name:"武汉",value:[114.31, 30.52,(Math.random() * 300).toFixed(2)]}
            ]; // 设置业务数据
            /*
             * 3d系列二业务数据和图标设置
             */
            mapOption.series[1].type = "scatter3D";//自定义图标类型，此处可以设置scatter3D、effectScatte3D
            mapOption.series[1].name = "scatter3D";// 自定义图列名称
            mapOption.tooltip.formatter = displayContent;// 设置内容展示
            mapOption.series[1].data = [
                {name:"贵阳",value:[106.71, 26.57,((Math.random() * 100) + 50).toFixed(2)]},
                {name:"西宁",value:[101.74, 36.56,((Math.random() * 100) + 50).toFixed(2)]},
                {name:"南昌",value:[115.89, 28.68,((Math.random() * 100) + 50).toFixed(2)]},
                {name:"郑州",value:[113.65, 34.76,((Math.random() * 100) + 50).toFixed(2)]},
                {name:"南京",value:[118.78, 32.04,((Math.random() * 100) + 50).toFixed(2)]},
                {name:"北京",value:[116.46, 39.92,((Math.random() * 100) + 50).toFixed(2)]}
            ]; // 设置业务数据

            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
            // 数据加载项，增强用户体验
            //mapChart.hideLoading();
        });
    }
    /*
     * 设置覆盖物鼠标移上去的展示形式，此处可以自定义，可以做成弹出框等等
     */
    var displayContent = function (params)
    {
        return "【" + params.name + "】:【" + params.value[2] + "】";
    }

    setInterval(getMap, 5000);
</script>
</html>